<template>
  <div class="dashboard-container">
    <!-- <el-row :gutter="20">
      <page-header />
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" />
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" />
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" />
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" />
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" />
    </el-row> -->
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in debashdata"
        :key="index"
        v-loading="listLoading"
        :lg="6"
        :md="12"
        :sm="24"
        :xl="6"
        :xs="24"
      >
        <top-card
          :count-config="item"
          :icon="item.icon"
          :background="item.background"
          :percentage="item.percentage"
          :title="item.title"
        />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <trend
          ref="trendRef"
          v-loading="listLoading"
          :xaxis="xaxis"
          :trend="trend"
        />
      </el-col>
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <branch />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <rank />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <rank />
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <branch />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <trend />
      </el-col> -->
      <!-- <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <tabs />
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
  // import PageHeader from './components/PageHeader'
  import TopCard from './components/TopCard'
  // import Branch from './components/Branch'
  // import Rank from './components/Rank'
  import Trend from './components/Trend'

  import { debashIndex } from '@/api/debash'

  export default defineComponent({
    name: 'Index',
    components: {
      // PageHeader,
      TopCard,
      Trend,
      // Branch,
      // Rank,
    },
    setup() {
      const state = reactive({
        trendRef: null,
        countConfig1: {
          startVal: 0,
          endVal: _.random(1000, 20000),
          decimals: 2,
          prefix: '￥',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        debashdata: [{}, {}, {}, {}],
        queryForm: {},
        listLoading: false,
      })

      onMounted(() => {
        fetchData()
      })
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { top_card, trend, xaxis },
        } = await debashIndex(state.queryForm)
        state.debashdata = top_card
        state.trend = trend
        state.xaxis = xaxis
        state.trendRef.init(trend, xaxis)
        state.listLoading = false
      }
      return {
        ...toRefs(state),
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .dashboard-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .el-card {
        height: 300px;

        [class*='-echart'] {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
</style>
